import "./index.scss";
import { ArrowLeftIcon, Fullscreen1Icon } from 'tdesign-icons-react';


interface PageWrapperProps {
  // 页面标题
  title: string;
  // 是否使用返回上一页
  useBack?: boolean;
  // 自定义返回路径
  backUrl?: string;
  // 是否使用全屏切换
  useFullScreen?: boolean;
  children?: React.ReactNode
}

/**
 * 页面标题组件
 * @returns 
 */
const PageWrapper: React.FC<PageWrapperProps> = ({ title, useBack, backUrl, useFullScreen, children }) => {

  /**
   * 返回事件
   */
  const onBackClick = () => {
    console.log('返回', backUrl)
  }

  return (
    <div className="page-wrap__container">
      {/* 标题 */}
      <h3 className={`page__title ${useBack ? 'is-back' : ''} ${useFullScreen ? 'is-full-screen' : ''}`}>
        {
          useBack ? 
            <div className="back-icon" onClick={onBackClick}>
              <ArrowLeftIcon />
            </div>
          : '' 
      }
        {title}
        

        {/* 全屏图标 */}
        <div className="full-screen__icon">
          <Fullscreen1Icon />
        </div>
      </h3>

      {/* 页面内容 */}
      <div className="page__inner">
        { children }
      </div>
    </div>
  )
}

export default PageWrapper;